<template>
    <div>
       <el-dialog
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :before-close="close"
        width="35%"
        top="15vh"
       >
        <div slot="title">
            <span style="text-align: center;font-size: 20px;color: #000; display: flex;justify-content: center;">赠送积分</span>
        </div>
        <div class="integral_content">
            <div class="integral_content_top">
                <el-checkbox-group v-model="numberValidateForm.checkList">
                    <el-checkbox :label="item.value" v-for="item in integralList" :key="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="integral_content_conter">
               <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item 
                        label="积分"
                        prop="integralNun" 
                        :rules="[{ required: true, message: '积分不能为空'},{ type: 'number', message: '积分必须为数字值'}]">
                      <el-input type="integralNun" v-model.number="numberValidateForm.integralNun" autocomplete="off"></el-input>
                    </el-form-item>
               </el-form>
            </div>
        </div>  
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="resetForm('numberValidateForm')">确 定</el-button>
        </div>
       </el-dialog>
    </div>
</template>

<script>
export default {
  name: "integral",
  props: {
    propsObj: {   // 用户数据
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      centerDialogVisible: true,  
      integralList: [
        { value: "0", name: "志愿者积分" },
        { value: "1", name: "罗曼贡献积分"},
        { value: "2", name: "罗曼VIP积分"},
      ],
      userObj: {},
      numberValidateForm: {
        checkList: [],
        integralNun: null
      }
    }
  },
  watch: {
    propsObj: {
      handler(val,oldval){
        this.userObj = val;   // 用户数据
        this.numberValidateForm.integralNun = this.userObj.integral;  // 积分
        if (this.userObj.integralCheckList && this.userObj.integralCheckList.length > 0) {
          this.userObj.integralCheckList.forEach( item=> {
            this.numberValidateForm.checkList.push(item);   // 积分ID
          });
        }
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    // 关闭弹框；
    closeTheReportDrawer(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closeTheReportDrawer');
    },
    // 选择积分
    selectChange(item){
      this.numberValidateForm.checkList = item;
    },
    // 确定
    resetForm(formName) {
      if (this.numberValidateForm.checkList && this.numberValidateForm.checkList.length <=0 ) {
        this.$message.warning('积分不能为空！');
      }else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userObj.integral = this.numberValidateForm.integralNun;   // 积分
            this.userObj.integralCheckList = this.numberValidateForm.checkList;  // 选择的积分ID
            if (this.numberValidateForm.checkList && this.numberValidateForm.checkList.length > 0) {
              // this.numberValidateForm.checkList.forEach( item => {
              //   this.integralList.forEach( (item1,index1)=> {
              this.userObj.integralCheckNameList = "";
              for (let i = 0; i < this.numberValidateForm.checkList.length; i++) {
                for (let j = 0; j <  this.integralList.length; j++) {
                  if (this.numberValidateForm.checkList[i] === this.integralList[j].value) {
                    if ( this.numberValidateForm.checkList.length -1 === 0 ) {
                      this.userObj.integralCheckNameList = this.integralList[j].name;
                    }else{
                      this.userObj.integralCheckNameList += `${this.integralList[j].name },`; // 积分名称
                      break;
                    }
                  }
                }  
              }
              //   })
              // })
            }
            this.$emit('userintegral',this.userObj);
            this.$message.success('赠送成功！');
            this.close()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.integral_content{
    // border-top: 1px solid #E4E4E4;
    .integral_content_top{
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
    }
    .integral_content_conter{
        margin-top: 30px;
        margin-right: 50px;
    }
}
</style>